<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>智慧书店</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      </el-breadcrumb>

      <el-table
        border
        :data="orderRecordList"
        >
        <el-table-column
          prop="id"
          label="订单编号"
          align="center">
        </el-table-column>
        <el-table-column
                prop="goodsName"
                label="书籍名称"
                align="center">
        </el-table-column>
        <el-table-column
                prop="buyNum"
                label="书籍数量"
                align="center">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="下单时间"
          align="center">
          <template slot-scope="scope">
            {{scope.row.createTime|hireDateFit}}
          </template>
        </el-table-column>
        <el-table-column
          prop="orderPrice"
          label="订单金额"
          align="center">
        </el-table-column>
        <el-table-column
          label="会员账号"
          align="center">{{userInfo.userName}}
        </el-table-column>
        <el-table-column
          prop="orderStatus"
          label="订单状态"
          align="center">
          <template slot-scope="scope">
            {{scope.row.orderStatus|deletedFit}}
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="200"
          align="center">
          <!--点击按钮 需要绑定@click的时间 例如 @click="add"-->
          <template slot-scope="scope">
            <div v-if="scope.row.orderStatus == 0">
              <el-button type="warning" size="mini" @click="delById(scope.row.id)">取消</el-button>
              <el-button type="warning" size="mini" @click="payById(scope.row.code)">支付</el-button>
            </div>
            <div v-if="scope.row.orderStatus != 0">
              <el-button type="info" size="mini" disabled>取消</el-button>
              <el-button type="info" size="mini" disabled>支付</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!--<div class="block">-->
        <!--<el-pagination-->
          <!--@size-change="handleSizeChange"-->
          <!--@current-change="handleCurrentChange"-->
          <!--:current-page="page.currentPage"-->
          <!--:page-sizes="[5, 10, 15, 20]"-->
          <!--:page-size="page.pageSize"-->
          <!--layout="total, sizes, prev, pager, next, jumper"-->
          <!--:total="total">-->
        <!--</el-pagination>-->

      <!--</div>-->
    </el-card>
  </div>
</template>

<script>
    import moment from 'moment'
    export default {

        name: "OrderRecordList",
        userInfo:{},
        data(){
            return{
                orderRecordList:[],
                userInfo:{}
            }
        },
        methods:{
            findorderRecordList:function() {
                this.$http.post('/orderRecord/findOneOrderRecordOnline?userInfoCode='+this.userInfo.code).then((res)=>{
                    console.log(res)
                    if (res.data.success){
                        this.orderRecordList = res.data.result.oneOrderRecordOnline;
                    } else {
                        this.$message.error(res.data.message)
                    }
                })
            },
            delById:function(id){
                this.$http.post('http://localhost:8005/orderRecord/cancelOrderRecord?userInfoCode='+this.userInfo.code+"&orderRecordId="+id).then((res)=>{
                    if (res.data.success) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                    }
                    this.findorderRecordList();
                })
            },
            payById:function(val){
                this.$http.post('/orderRecord/createPayRecord?payStatus='+1+'&orderRecordCode='+val+"&userInfoCode="+this.userInfo.code).then((res)=>{
                    if (res.data.success) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.$router.push({name:'PayRecordList'})
                    }
                    this.findorderRecordList();
                })
            }


        },
        mounted() {
            this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
            this.findorderRecordList();
        },
        filters:{
            hireDateFit:function (val) {
                return moment(val).format("YYYY-MM-DD HH:mm:ss")
            },
            deletedFit:function (val) {
                if (val==0){
                    return "待支付"
                }
                if (val==1){
                    return "已完成"
                }
                if (val==2){
                    return "已取消"
                }
            }
        }
    }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
</style>
